<template>

<div>
  <el-row :gutter="12">
    <el-col :span="8">
        <!-- <el-input v-model="form.name"></el-input> -->
         <el-input placeholder="请输入内容" v-model="name" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
       </el-input>
    </el-col>
    <el-col :span="8">
        <el-select v-model="select" placeholder="分类">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
    </el-col>
    <el-col :span="8">
        <el-select v-model="select" placeholder="标签">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="12" class="row">
    <el-col :span="24">
       <el-input placeholder="请输入内容" v-model="name" class="input-with-select">
        <el-button slot="prepend">首图</el-button>
       </el-input>
    </el-col>
  </el-row>
  <el-row :gutter="12" class="row">
    <el-col :span="6">
        <el-select v-model="select" placeholder="标签">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
    </el-col>
    <el-col :span="6">
        <el-select v-model="select" placeholder="标签">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
    </el-col>
    <el-col :span="6">
        <el-select v-model="select" placeholder="标签">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
    </el-col>
    <el-col :span="6">
        <el-select v-model="select" placeholder="标签">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="12" class="row">
    <el-col :span="24">
        <mavon-editor v-model="value"/>
    </el-col>
  </el-row>
  <el-row :gutter="12" class="row">
    <el-col :span="24" style="display: flex; justify-content: flex-end;">
        <el-button type="primary">保存</el-button>
        <el-button type="success">发布</el-button>
        <el-button>取消</el-button>
    </el-col>
  </el-row>
  </div>
</template>
<script>
export default{
    name:'Article_edit',
    data(){
        return{
             value: '',
             select: '',
              name: '',
        }
    },
    methods:{
        onSubmit() {
            console.log('submit!');
        }
    }
}
</script>
<style>
.el-select .el-input {
    width: 130px;
  }
.el-input {
  width: 100%;
}
.el-select {
    display: inline-block;
    position: relative;
    width: 100%;
}
.el-select .el-input {
    width: 100%;
}
.el-input-group__append .el-button, .el-input-group__append .el-select, .el-input-group__prepend .el-button, .el-input-group__prepend .el-select {
    display: inline-block;
    margin: -10px -20px;
    width: 89px;
}
.row{
  margin-top:10px;
}
</style>